<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交发布页 - 多风格展示</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      min-height: 100vh;
      color: #333;
      transition: background-color 0.3s;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 页面容器 */
    .page-container {
      display: none;
      min-height: 100vh;
      padding-bottom: 80px;
    }
    
    .page-container.active {
      display: block;
    }
    
    /* 导航栏通用样式 */
    .navbar {
      padding: 15px 0;
      position: sticky;
      top: 0;
      z-index: 100;
      transition: all 0.3s;
    }
    
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      background: none;
      border: none;
      color: inherit;
      font-size: 16px;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 6px;
      font-weight: 500;
      transition: background-color 0.2s;
    }
    
    .nav-btn.primary {
      font-weight: 600;
    }
    
    /* 发布区域样式 */
    .post-container {
      padding: 15px 0;
    }
    
    .user-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .user-name {
      font-weight: 600;
      font-size: 15px;
    }
    
    .post-input {
      width: 100%;
      border: none;
      outline: none;
      resize: none;
      min-height: 120px;
      font-size: 16px;
      line-height: 1.5;
      padding: 0;
      margin-bottom: 15px;
    }
    
    /* 功能按钮区 */
    .post-tools {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-top: 1px solid;
      border-bottom: 1px solid;
      margin-bottom: 15px;
    }
    
    .tool-btn {
      background: none;
      border: none;
      color: inherit;
      font-size: 20px;
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s;
    }
    
    /* 内容区块样式 */
    .content-block {
      padding: 12px 0;
      border-bottom: 1px solid;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .block-title {
      font-size: 16px;
      font-weight: 500;
    }
    
    .block-info {
      font-size: 14px;
      opacity: 0.7;
      margin-top: 4px;
    }
    
    .block-icon {
      font-size: 18px;
    }
    
    /* 弹出层通用样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      display: none;
      z-index: 1000;
    }
    
    .modal-popup {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 540px;
      margin: 0 auto;
      border-radius: 16px 16px 0 0;
      max-height: 80vh;
      overflow-y: auto;
      transform: translateY(100%);
      transition: transform 0.3s ease-out;
      z-index: 1001;
    }
    
    .modal-popup.active {
      transform: translateY(0);
    }
    
    .modal-header {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .modal-close {
      background: none;
      border: none;
      color: inherit;
      font-size: 20px;
      cursor: pointer;
    }
    
    .modal-body {
      padding: 15px;
    }
    
    /* 话题搜索与选择 */
    .search-container {
      position: relative;
      margin-bottom: 15px;
    }
    
    .search-input {
      width: 100%;
      padding: 12px 15px 12px 40px;
      border-radius: 8px;
      border: 1px solid;
      font-size: 15px;
      outline: none;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      opacity: 0.6;
    }
    
    .topics-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .topic-item {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      border: 1px solid;
    }
    
    .topic-item.selected {
      font-weight: 500;
    }
    
    .recent-topics {
      margin-top: 20px;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 10px;
    }
    
    /* 标签区域 */
    .tags-container {
      margin-bottom: 15px;
    }
    
    .tags-input {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 8px;
      min-height: 42px;
    }
    
    .tag {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 16px;
      font-size: 13px;
    }
    
    .tag-remove {
      background: none;
      border: none;
      color: inherit;
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
    }
    
    .tag-input {
      border: none;
      outline: none;
      flex: 1;
      min-width: 100px;
      font-size: 14px;
      padding: 4px 0;
    }
    
    /* 链接区域 */
    .link-input-group {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .link-input {
      flex: 1;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid;
      font-size: 14px;
      outline: none;
    }
    
    .add-link-btn {
      padding: 0 12px;
      border-radius: 8px;
      border: 1px solid;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .link-preview {
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 15px;
      border: 1px solid;
      position: relative;
    }
    
    .link-content {
      padding: 12px;
    }
    
    .link-title {
      font-weight: 600;
      margin-bottom: 5px;
      font-size: 15px;
    }
    
    .link-desc {
      font-size: 13px;
      opacity: 0.8;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .link-url {
      font-size: 12px;
      opacity: 0.6;
    }
    
    .remove-link {
      background: none;
      border: none;
      color: inherit;
      cursor: pointer;
      font-size: 14px;
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 图片预览区 */
    .images-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .image-preview-item {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      position: relative;
    }
    
    .remove-image {
      position: absolute;
      top: -5px;
      right: -5px;
      background-color: rgba(0,0,0,0.6);
      color: white;
      border: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
    }
    
    .add-image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
      border: 1px dashed;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 30px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      padding: 8px;
      display: flex;
      gap: 5px;
    }
    
    .style-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      transition: transform 0.2s;
    }
    
    .style-btn:hover {
      transform: scale(1.1);
    }
    
    .style-btn.active {
      box-shadow: 0 0 0 2px white, 0 0 0 4px #0d6efd;
    }
    
    /* 底部操作栏 */
    .bottom-actions {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 540px;
      margin: 0 auto;
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      z-index: 100;
    }
    
    .cancel-btn {
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .publish-btn {
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    /* 发布成功弹窗 */
    .success-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    
    .modal-content {
      background-color: white;
      width: 85%;
      max-width: 320px;
      border-radius: 16px;
      padding: 30px 20px;
      text-align: center;
    }
    
    .modal-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 28px;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .modal-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 20px;
    }
    
    .modal-confirm {
      padding: 8px 24px;
      border-radius: 8px;
      font-weight: 500;
      border: none;
      cursor: pointer;
    }
    
    /* 风格1 - 简约白 */
    .style-1 {
      background-color: #ffffff;
    }
    
    .style-1 .navbar {
      background-color: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      color: #333;
    }
    
    .style-1 .nav-btn.primary {
      color: #0d6efd;
    }
    
    .style-1 .post-input {
      background-color: #ffffff;
      color: #333;
    }
    
    .style-1 .post-tools, .style-1 .content-block {
      border-color: #eee;
      color: #666;
    }
    
    .style-1 .tool-btn:hover {
      background-color: #f1f1f1;
    }
    
    .style-1 .modal-popup {
      background-color: white;
    }
    
    .style-1 .modal-header {
      border-color: #eee;
    }
    
    .style-1 .search-input {
      background-color: #f9f9f9;
      border-color: #ddd;
    }
    
    .style-1 .topic-item {
      border-color: #ddd;
      color: #555;
      background-color: #f9f9f9;
    }
    
    .style-1 .topic-item.selected {
      background-color: #e6f0ff;
      border-color: #0d6efd;
      color: #0d6efd;
    }
    
    .style-1 .tags-input {
      background-color: #f9f9f9;
      border: 1px solid #ddd;
    }
    
    .style-1 .tag {
      background-color: #e6f0ff;
      color: #0d6efd;
    }
    
    .style-1 .link-input {
      background-color: #f9f9f9;
      border-color: #ddd;
      color: #333;
    }
    
    .style-1 .add-link-btn {
      background-color: #f9f9f9;
      border-color: #ddd;
      color: #555;
    }
    
    .style-1 .add-link-btn:hover {
      background-color: #f1f1f1;
    }
    
    .style-1 .link-preview {
      background-color: #f9f9f9;
      border-color: #ddd;
    }
    
    .style-1 .add-image {
      color: #999;
      border-color: #ddd;
    }
    
    .style-1 .bottom-actions {
      background-color: #ffffff;
      border-top: 1px solid #eee;
    }
    
    .style-1 .cancel-btn {
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      color: #555;
    }
    
    .style-1 .publish-btn {
      background-color: #0d6efd;
      border: 1px solid #0d6efd;
      color: white;
    }
    
    .style-1 .modal-icon {
      background-color: #e6f7ed;
      color: #52c41a;
    }
    
    .style-1 .modal-confirm {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 风格2 - 深色模式 */
    .style-2 {
      background-color: #121212;
      color: #e0e0e0;
    }
    
    .style-2 .navbar {
      background-color: #1e1e1e;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    
    .style-2 .nav-btn.primary {
      color: #7bb3ff;
    }
    
    .style-2 .post-input {
      background-color: #121212;
      color: #e0e0e0;
    }
    
    .style-2 .post-tools, .style-2 .content-block, .style-2 .modal-header {
      border-color: #333;
    }
    
    .style-2 .tool-btn:hover {
      background-color: #333;
    }
    
    .style-2 .modal-popup {
      background-color: #1e1e1e;
    }
    
    .style-2 .search-input {
      background-color: #2a2a2a;
      border-color: #444;
      color: #e0e0e0;
    }
    
    .style-2 .topic-item {
      border-color: #444;
      color: #ccc;
      background-color: #2a2a2a;
    }
    
    .style-2 .topic-item.selected {
      background-color: #1a365d;
      border-color: #7bb3ff;
      color: #7bb3ff;
    }
    
    .style-2 .tags-input {
      background-color: #2a2a2a;
      border: 1px solid #444;
    }
    
    .style-2 .tag {
      background-color: #1a365d;
      color: #7bb3ff;
    }
    
    .style-2 .link-input {
      background-color: #2a2a2a;
      border-color: #444;
      color: #e0e0e0;
    }
    
    .style-2 .add-link-btn {
      background-color: #2a2a2a;
      border-color: #444;
      color: #ccc;
    }
    
    .style-2 .add-link-btn:hover {
      background-color: #333;
    }
    
    .style-2 .link-preview {
      background-color: #2a2a2a;
      border-color: #444;
    }
    
    .style-2 .add-image {
      color: #666;
      border-color: #444;
    }
    
    .style-2 .bottom-actions {
      background-color: #1e1e1e;
      border-top: 1px solid #333;
    }
    
    .style-2 .cancel-btn {
      background-color: #2a2a2a;
      border: 1px solid #444;
      color: #ccc;
    }
    
    .style-2 .publish-btn {
      background-color: #1a365d;
      border: 1px solid #7bb3ff;
      color: #7bb3ff;
    }
    
    .style-2 .modal-content {
      background-color: #1e1e1e;
      color: #e0e0e0;
    }
    
    .style-2 .modal-icon {
      background-color: #233828;
      color: #52c41a;
    }
    
    .style-2 .modal-confirm {
      background-color: #1a365d;
      color: #7bb3ff;
    }
    
    /* 风格3 - 活力彩 */
    .style-3 {
      background-color: #fff5f7;
      color: #333;
    }
    
    .style-3 .navbar {
      background: linear-gradient(90deg, #ff416c, #ff4b2b);
      color: white;
    }
    
    .style-3 .nav-btn.primary {
      color: white;
      background-color: rgba(255,255,255,0.2);
    }
    
    .style-3 .post-input {
      background-color: #fff5f7;
      color: #333;
    }
    
    .style-3 .post-tools, .style-3 .content-block, .style-3 .modal-header {
      border-color: #ffeff2;
      color: #ff416c;
    }
    
    .style-3 .tool-btn:hover {
      background-color: #ffeff2;
    }
    
    .style-3 .modal-popup {
      background-color: white;
    }
    
    .style-3 .search-input {
      background-color: #fff0f3;
      border-color: #ffccd5;
    }
    
    .style-3 .topic-item {
      border-color: #ffccd5;
      color: #d32f2f;
      background-color: #fff0f3;
    }
    
    .style-3 .topic-item.selected {
      background-color: #ffebf0;
      border-color: #ff416c;
      color: #ff416c;
    }
    
    .style-3 .tags-input {
      background-color: #fff0f3;
      border: 1px solid #ffccd5;
    }
    
    .style-3 .tag {
      background-color: #ffebf0;
      color: #ff416c;
    }
    
    .style-3 .link-input {
      background-color: #fff0f3;
      border-color: #ffccd5;
      color: #333;
    }
    
    .style-3 .add-link-btn {
      background-color: #fff0f3;
      border-color: #ffccd5;
      color: #d32f2f;
    }
    
    .style-3 .add-link-btn:hover {
      background-color: #ffebf0;
    }
    
    .style-3 .link-preview {
      background-color: #fff0f3;
      border-color: #ffccd5;
    }
    
    .style-3 .add-image {
      color: #ff416c;
      border-color: #ffccd5;
    }
    
    .style-3 .bottom-actions {
      background-color: white;
      border-top: 1px solid #ffeff2;
    }
    
    .style-3 .cancel-btn {
      background-color: #fff0f3;
      border: 1px solid #ffccd5;
      color: #d32f2f;
    }
    
    .style-3 .publish-btn {
      background: linear-gradient(90deg, #ff416c, #ff4b2b);
      border: none;
      color: white;
    }
    
    .style-3 .modal-icon {
      background-color: #fff0f3;
      color: #ff416c;
    }
    
    .style-3 .modal-confirm {
      background: linear-gradient(90deg, #ff416c, #ff4b2b);
      color: white;
    }
    
    /* 风格4 - 商务蓝 */
    .style-4 {
      background-color: #f0f7ff;
      color: #333;
    }
    
    .style-4 .navbar {
      background-color: #0a4da2;
      color: white;
    }
    
    .style-4 .nav-btn.primary {
      color: #0a4da2;
      background-color: white;
    }
    
    .style-4 .post-input {
      background-color: #f0f7ff;
      color: #333;
    }
    
    .style-4 .post-tools, .style-4 .content-block, .style-4 .modal-header {
      border-color: #e6f0ff;
      color: #0a4da2;
    }
    
    .style-4 .tool-btn:hover {
      background-color: #e6f0ff;
    }
    
    .style-4 .modal-popup {
      background-color: white;
    }
    
    .style-4 .search-input {
      background-color: #e6f0ff;
      border-color: #bdd7ee;
    }
    
    .style-4 .topic-item {
      border-color: #bdd7ee;
      color: #0a4da2;
      background-color: #e6f0ff;
    }
    
    .style-4 .topic-item.selected {
      background-color: #cce5ff;
      border-color: #0a4da2;
      color: #0a4da2;
    }
    
    .style-4 .tags-input {
      background-color: #e6f0ff;
      border: 1px solid #bdd7ee;
    }
    
    .style-4 .tag {
      background-color: #cce5ff;
      color: #0a4da2;
    }
    
    .style-4 .link-input {
      background-color: #e6f0ff;
      border-color: #bdd7ee;
      color: #333;
    }
    
    .style-4 .add-link-btn {
      background-color: #e6f0ff;
      border-color: #bdd7ee;
      color: #0a4da2;
    }
    
    .style-4 .add-link-btn:hover {
      background-color: #cce5ff;
    }
    
    .style-4 .link-preview {
      background-color: #e6f0ff;
      border-color: #bdd7ee;
    }
    
    .style-4 .add-image {
      color: #0a4da2;
      border-color: #bdd7ee;
    }
    
    .style-4 .bottom-actions {
      background-color: white;
      border-top: 1px solid #e6f0ff;
    }
    
    .style-4 .cancel-btn {
      background-color: #e6f0ff;
      border: 1px solid #bdd7ee;
      color: #0a4da2;
    }
    
    .style-4 .publish-btn {
      background-color: #0a4da2;
      border: 1px solid #0a4da2;
      color: white;
    }
    
    .style-4 .modal-icon {
      background-color: #e6f0ff;
      color: #0a4da2;
    }
    
    .style-4 .modal-confirm {
      background-color: #0a4da2;
      color: white;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="1" style="background-color: #f8f9fa; border: 1px solid #ddd;"></button>
    <button class="style-btn" data-style="2" style="background-color: #121212;"></button>
    <button class="style-btn" data-style="3" style="background: linear-gradient(45deg, #ff416c, #ff4b2b);"></button>
    <button class="style-btn" data-style="4" style="background-color: #0a4da2;"></button>
  </div>
  
  <!-- 风格1 - 简约白 -->
  <div class="page-container style-1 active" data-style="1">
    <!-- 导航栏 -->
    <div class="navbar">
      <div class="container nav-container">
        <button class="nav-btn back-btn">取消</button>
        <h1 class="nav-title">发布动态</h1>
        <button class="nav-btn primary preview-btn">预览</button>
      </div>
    </div>
    
    <div class="container">
      <div class="post-container">
        <!-- 用户信息 -->
        <div class="user-bar">
          <img src="https://picsum.photos/200/200?random=100" alt="用户头像" class="user-avatar">
          <span class="user-name">我的账号</span>
        </div>
        
        <!-- 内容输入 -->
        <textarea class="post-input" placeholder="分享你的想法..."></textarea>
        
        <!-- 功能按钮 -->
        <div class="post-tools">
          <button class="tool-btn" title="添加图片">
            <i class="fa fa-image"></i>
          </button>
          <button class="tool-btn" title="添加视频">
            <i class="fa fa-video-camera"></i>
          </button>
          <button class="tool-btn" title="添加表情">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="tool-btn" title="添加位置">
            <i class="fa fa-map-marker"></i>
          </button>
          <button class="tool-btn" title="更多选项">
            <i class="fa fa-ellipsis-h"></i>
          </button>
        </div>
        
        <!-- 图片预览区 -->
        <div class="images-preview">
          <div class="add-image">
            <i class="fa fa-plus"></i>
          </div>
        </div>
        
        <!-- 话题选择区块 -->
        <div class="content-block topic-block">
          <div>
            <div class="block-title">选择话题</div>
            <div class="block-info selected-topic">未选择话题</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
        
        <!-- 标签区块 -->
        <div class="content-block tag-block">
          <div>
            <div class="block-title">添加标签</div>
            <div class="block-info tag-count">0个标签</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
        
        <!-- 链接区块 -->
        <div class="content-block link-block">
          <div>
            <div class="block-title">添加链接</div>
            <div class="block-info link-status">未添加链接</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
      </div>
    </div>
    
    <!-- 底部操作栏 -->
    <div class="bottom-actions">
      <button class="cancel-btn">存草稿</button>
      <button class="publish-btn">发布</button>
    </div>
  </div>
  
  <!-- 风格2 - 深色模式 -->
  <div class="page-container style-2" data-style="2">
    <!-- 内容结构与风格1相同 -->
    <div class="navbar">
      <div class="container nav-container">
        <button class="nav-btn back-btn">取消</button>
        <h1 class="nav-title">发布动态</h1>
        <button class="nav-btn primary preview-btn">预览</button>
      </div>
    </div>
    
    <div class="container">
      <div class="post-container">
        <div class="user-bar">
          <img src="https://picsum.photos/200/200?random=100" alt="用户头像" class="user-avatar">
          <span class="user-name">我的账号</span>
        </div>
        
        <textarea class="post-input" placeholder="分享你的想法..."></textarea>
        
        <div class="post-tools">
          <button class="tool-btn" title="添加图片">
            <i class="fa fa-image"></i>
          </button>
          <button class="tool-btn" title="添加视频">
            <i class="fa fa-video-camera"></i>
          </button>
          <button class="tool-btn" title="添加表情">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="tool-btn" title="添加位置">
            <i class="fa fa-map-marker"></i>
          </button>
          <button class="tool-btn" title="更多选项">
            <i class="fa fa-ellipsis-h"></i>
          </button>
        </div>
        
        <div class="images-preview">
          <div class="add-image">
            <i class="fa fa-plus"></i>
          </div>
        </div>
        
        <div class="content-block topic-block">
          <div>
            <div class="block-title">选择话题</div>
            <div class="block-info selected-topic">未选择话题</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
        
        <div class="content-block tag-block">
          <div>
            <div class="block-title">添加标签</div>
            <div class="block-info tag-count">0个标签</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
        
        <div class="content-block link-block">
          <div>
            <div class="block-title">添加链接</div>
            <div class="block-info link-status">未添加链接</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
      </div>
    </div>
    
    <div class="bottom-actions">
      <button class="cancel-btn">存草稿</button>
      <button class="publish-btn">发布</button>
    </div>
  </div>
  
  <!-- 风格3 - 活力彩 -->
  <div class="page-container style-3" data-style="3">
    <!-- 内容结构与风格1相同 -->
    <div class="navbar">
      <div class="container nav-container">
        <button class="nav-btn back-btn">取消</button>
        <h1 class="nav-title">发布动态</h1>
        <button class="nav-btn primary preview-btn">预览</button>
      </div>
    </div>
    
    <div class="container">
      <div class="post-container">
        <div class="user-bar">
          <img src="https://picsum.photos/200/200?random=100" alt="用户头像" class="user-avatar">
          <span class="user-name">我的账号</span>
        </div>
        
        <textarea class="post-input" placeholder="分享你的想法..."></textarea>
        
        <div class="post-tools">
          <button class="tool-btn" title="添加图片">
            <i class="fa fa-image"></i>
          </button>
          <button class="tool-btn" title="添加视频">
            <i class="fa fa-video-camera"></i>
          </button>
          <button class="tool-btn" title="添加表情">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="tool-btn" title="添加位置">
            <i class="fa fa-map-marker"></i>
          </button>
          <button class="tool-btn" title="更多选项">
            <i class="fa fa-ellipsis-h"></i>
          </button>
        </div>
        
        <div class="images-preview">
          <div class="add-image">
            <i class="fa fa-plus"></i>
          </div>
        </div>
        
        <div class="content-block topic-block">
          <div>
            <div class="block-title">选择话题</div>
            <div class="block-info selected-topic">未选择话题</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
        
        <div class="content-block tag-block">
          <div>
            <div class="block-title">添加标签</div>
            <div class="block-info tag-count">0个标签</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
        
        <div class="content-block link-block">
          <div>
            <div class="block-title">添加链接</div>
            <div class="block-info link-status">未添加链接</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
      </div>
    </div>
    
    <div class="bottom-actions">
      <button class="cancel-btn">存草稿</button>
      <button class="publish-btn">发布</button>
    </div>
  </div>
  
  <!-- 风格4 - 商务蓝 -->
  <div class="page-container style-4" data-style="4">
    <!-- 内容结构与风格1相同 -->
    <div class="navbar">
      <div class="container nav-container">
        <button class="nav-btn back-btn">取消</button>
        <h1 class="nav-title">发布动态</h1>
        <button class="nav-btn primary preview-btn">预览</button>
      </div>
    </div>
    
    <div class="container">
      <div class="post-container">
        <div class="user-bar">
          <img src="https://picsum.photos/200/200?random=100" alt="用户头像" class="user-avatar">
          <span class="user-name">我的账号</span>
        </div>
        
        <textarea class="post-input" placeholder="分享你的想法..."></textarea>
        
        <div class="post-tools">
          <button class="tool-btn" title="添加图片">
            <i class="fa fa-image"></i>
          </button>
          <button class="tool-btn" title="添加视频">
            <i class="fa fa-video-camera"></i>
          </button>
          <button class="tool-btn" title="添加表情">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="tool-btn" title="添加位置">
            <i class="fa fa-map-marker"></i>
          </button>
          <button class="tool-btn" title="更多选项">
            <i class="fa fa-ellipsis-h"></i>
          </button>
        </div>
        
        <div class="images-preview">
          <div class="add-image">
            <i class="fa fa-plus"></i>
          </div>
        </div>
        
        <div class="content-block topic-block">
          <div>
            <div class="block-title">选择话题</div>
            <div class="block-info selected-topic">未选择话题</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
        
        <div class="content-block tag-block">
          <div>
            <div class="block-title">添加标签</div>
            <div class="block-info tag-count">0个标签</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
        
        <div class="content-block link-block">
          <div>
            <div class="block-title">添加链接</div>
            <div class="block-info link-status">未添加链接</div>
          </div>
          <i class="fa fa-chevron-right block-icon"></i>
        </div>
      </div>
    </div>
    
    <div class="bottom-actions">
      <button class="cancel-btn">存草稿</button>
      <button class="publish-btn">发布</button>
    </div>
  </div>
  
  <!-- 话题选择弹窗 -->
  <div class="modal-overlay topic-overlay"></div>
  <div class="modal-popup topic-popup">
    <div class="modal-header">
      <h2 class="modal-title">选择话题</h2>
      <button class="modal-close topic-close">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <div class="search-container">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input topic-search" placeholder="搜索话题">
      </div>
      
      <div class="topics-list">
        <div class="topic-item">日常</div>
        <div class="topic-item">美食</div>
        <div class="topic-item">旅行</div>
        <div class="topic-item">音乐</div>
        <div class="topic-item">电影</div>
        <div class="topic-item">科技</div>
        <div class="topic-item">职场</div>
        <div class="topic-item">学习</div>
        <div class="topic-item">健身</div>
        <div class="topic-item">摄影</div>
        <div class="topic-item">游戏</div>
        <div class="topic-item">设计</div>
        <div class="topic-item">读书</div>
        <div class="topic-item">宠物</div>
        <div class="topic-item">时尚</div>
      </div>
      
      <div class="recent-topics">
        <h3 class="section-title">最近使用</h3>
        <div class="topics-list">
          <div class="topic-item">日常</div>
          <div class="topic-item">美食</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 标签弹窗 -->
  <div class="modal-overlay tag-overlay"></div>
  <div class="modal-popup tag-popup">
    <div class="modal-header">
      <h2 class="modal-title">添加标签</h2>
      <button class="modal-close tag-close">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <div class="tags-input">
        <input type="text" class="tag-input" placeholder="输入标签，按回车添加">
      </div>
      
      <div class="recent-topics">
        <h3 class="section-title">推荐标签</h3>
        <div class="topics-list">
          <div class="topic-item">热门</div>
          <div class="topic-item">生活</div>
          <div class="topic-item">今日</div>
          <div class="topic-item">分享</div>
          <div class="topic-item">心情</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 链接弹窗 -->
  <div class="modal-overlay link-overlay"></div>
  <div class="modal-popup link-popup">
    <div class="modal-header">
      <h2 class="modal-title">添加链接</h2>
      <button class="modal-close link-close">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <div class="link-input-group">
        <input type="text" class="link-input" placeholder="输入网址">
        <button class="add-link-btn">添加</button>
      </div>
      
      <!-- 链接预览（默认隐藏） -->
      <div class="link-preview" style="display: none;">
        <button class="remove-link">
          <i class="fa fa-times"></i>
        </button>
        <div class="link-content">
          <div class="link-title">链接标题将显示在这里</div>
          <div class="link-desc">链接的描述内容将显示在这里，通常是网页的元描述信息</div>
          <div class="link-url">https://example.com</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 发布成功弹窗 -->
  <div class="success-modal" id="successModal">
    <div class="modal-content">
      <div class="modal-icon">
        <i class="fa fa-check"></i>
      </div>
      <div class="modal-title">发布成功</div>
      <div class="modal-desc">你的动态已成功发布到社交平台</div>
      <button class="modal-confirm" id="modalConfirm">确定</button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取当前激活的页面容器
    function getActivePage() {
      return document.querySelector('.page-container.active');
    }
    
    // 风格切换功能
    const styleBtns = document.querySelectorAll('.style-btn');
    const pageContainers = document.querySelectorAll('.page-container');
    
    styleBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有活跃状态
        styleBtns.forEach(b => b.classList.remove('active'));
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 添加当前活跃状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.querySelector(`.page-container[data-style="${style}"]`).classList.add('active');
        
        // 更新弹窗样式以匹配当前风格
        updateModalStyle(style);
      });
    });
    
    // 更新弹窗样式
    function updateModalStyle(style) {
      const modalPopups = document.querySelectorAll('.modal-popup');
      const modalContents = document.querySelectorAll('.modal-content, .modal-icon, .modal-confirm');
      
      modalPopups.forEach(popup => {
        // 移除所有风格类
        popup.classList.remove('style-1', 'style-2', 'style-3', 'style-4');
        // 添加当前风格类
        popup.classList.add(`style-${style}`);
      });
      
      modalContents.forEach(el => {
        el.classList.remove('style-1', 'style-2', 'style-3', 'style-4');
        el.classList.add(`style-${style}`);
      });
    }
    
    // 初始化弹窗样式
    updateModalStyle(1);
    
    // 弹窗控制函数
    function openPopup(popupClass, overlayClass) {
      document.querySelector(`.${popupClass}`).classList.add('active');
      document.querySelector(`.${overlayClass}`).style.display = 'block';
      // 阻止背景滚动
      document.body.style.overflow = 'hidden';
    }
    
    function closePopup(popupClass, overlayClass) {
      document.querySelector(`.${popupClass}`).classList.remove('active');
      document.querySelector(`.${overlayClass}`).style.display = 'none';
      // 恢复背景滚动
      document.body.style.overflow = 'auto';
    }
    
    // 话题弹窗控制
    document.querySelectorAll('.topic-block').forEach(block => {
      block.addEventListener('click', function() {
        openPopup('topic-popup', 'topic-overlay');
      });
    });
    
    document.querySelector('.topic-close').addEventListener('click', function() {
      closePopup('topic-popup', 'topic-overlay');
    });
    
    document.querySelector('.topic-overlay').addEventListener('click', function() {
      closePopup('topic-popup', 'topic-overlay');
    });
    
    // 话题搜索功能
    const topicSearch = document.querySelector('.topic-search');
    const topicItems = document.querySelectorAll('.topic-item');
    
    topicSearch.addEventListener('input', function() {
      const searchTerm = this.value.toLowerCase().trim();
      
      topicItems.forEach(item => {
        const topicText = item.textContent.toLowerCase();
        if (topicText.includes(searchTerm)) {
          item.style.display = 'block';
        } else {
          item.style.display = 'none';
        }
      });
    });
    
    // 话题选择功能
    topicItems.forEach(item => {
      item.addEventListener('click', function() {
        // 清除所有选中状态
        topicItems.forEach(i => i.classList.remove('selected'));
        // 添加当前选中状态
        this.classList.add('selected');
        
        // 更新当前页面的话题显示
        const topicText = this.textContent;
        getActivePage().querySelector('.selected-topic').textContent = `已选择: ${topicText}`;
        
        // 关闭弹窗
        closePopup('topic-popup', 'topic-overlay');
      });
    });
    
    // 标签弹窗控制
    document.querySelectorAll('.tag-block').forEach(block => {
      block.addEventListener('click', function() {
        openPopup('tag-popup', 'tag-overlay');
      });
    });
    
    document.querySelector('.tag-close').addEventListener('click', function() {
      closePopup('tag-popup', 'tag-overlay');
    });
    
    document.querySelector('.tag-overlay').addEventListener('click', function() {
      closePopup('tag-popup', 'tag-overlay');
    });
    
    // 标签添加功能
    const tagInput = document.querySelector('.tag-input');
    const tagsContainer = tagInput.parentElement;
    
    tagInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' && this.value.trim() !== '') {
        e.preventDefault();
        const tagText = this.value.trim();
        
        // 创建标签元素
        const tag = document.createElement('div');
        tag.className = 'tag';
        tag.innerHTML = `
          #${tagText}
          <button class="tag-remove">
            <i class="fa fa-times"></i>
          </button>
        `;
        
        // 添加删除标签事件
        tag.querySelector('.tag-remove').addEventListener('click', function() {
          tag.remove();
          updateTagCount();
        });
        
        // 将标签添加到容器
        tagsContainer.insertBefore(tag, this);
        
        // 清空输入框
        this.value = '';
        
        // 更新标签计数
        updateTagCount();
      }
    });
    
    // 推荐标签点击添加
    document.querySelectorAll('.recent-topics .topic-item').forEach(item => {
      item.addEventListener('click', function() {
        const tagText = this.textContent;
        
        // 检查标签是否已存在
        const existingTags = document.querySelectorAll('.tag');
        for (let tag of existingTags) {
          if (tag.textContent.includes(tagText)) {
            return; // 已存在则不添加
          }
        }
        
        // 创建标签元素
        const tag = document.createElement('div');
        tag.className = 'tag';
        tag.innerHTML = `
          #${tagText}
          <button class="tag-remove">
            <i class="fa fa-times"></i>
          </button>
        `;
        
        // 添加删除标签事件
        tag.querySelector('.tag-remove').addEventListener('click', function() {
          tag.remove();
          updateTagCount();
        });
        
        // 将标签添加到容器
        tagsContainer.insertBefore(tag, tagInput);
        
        // 更新标签计数
        updateTagCount();
      });
    });
    
    // 更新标签计数
    function updateTagCount() {
      const tagCount = document.querySelectorAll('.tag').length;
      getActivePage().querySelector('.tag-count').textContent = `${tagCount}个标签`;
    }
    
    // 链接弹窗控制
    document.querySelectorAll('.link-block').forEach(block => {
      block.addEventListener('click', function() {
        openPopup('link-popup', 'link-overlay');
      });
    });
    
    document.querySelector('.link-close').addEventListener('click', function() {
      closePopup('link-popup', 'link-overlay');
    });
    
    document.querySelector('.link-overlay').addEventListener('click', function() {
      closePopup('link-popup', 'link-overlay');
    });
    
    // 链接添加功能
    document.querySelector('.add-link-btn').addEventListener('click', function() {
      const input = this.parentElement.querySelector('.link-input');
      const linkPreview = document.querySelector('.link-preview');
      
      if (input.value.trim() !== '') {
        // 显示链接预览
        linkPreview.style.display = 'block';
        
        // 更新链接预览内容
        const url = input.value.trim();
        linkPreview.querySelector('.link-url').textContent = url;
        
        // 提取域名作为标题
        try {
          const urlObj = new URL(url);
          linkPreview.querySelector('.link-title').textContent = urlObj.hostname;
        } catch (e) {
          linkPreview.querySelector('.link-title').textContent = '链接预览';
        }
        
        // 更新主页面显示
        getActivePage().querySelector('.link-status').textContent = '已添加链接';
        
        // 清空输入框
        input.value = '';
      }
    });
    
    // 移除链接功能
    document.querySelector('.remove-link').addEventListener('click', function() {
      this.closest('.link-preview').style.display = 'none';
      // 更新主页面显示
      getActivePage().querySelector('.link-status').textContent = '未添加链接';
    });
    
    // 图片添加功能
    document.querySelectorAll('.add-image').forEach(addBtn => {
      addBtn.addEventListener('click', function() {
        // 模拟添加图片
        const imagesPreview = this.parentElement;
        
        // 限制最多添加9张图片
        if (imagesPreview.children.length < 10) {
          const randomNum = Math.floor(Math.random() * 100);
          const imgSrc = `https://picsum.photos/400/400?random=${randomNum}`;
          
          // 创建图片预览元素
          const imgPreview = document.createElement('div');
          imgPreview.className = 'image-preview-item';
          imgPreview.style.backgroundImage = `url(${imgSrc})`;
          imgPreview.style.backgroundSize = 'cover';
          
          // 添加删除按钮
          const removeBtn = document.createElement('button');
          removeBtn.className = 'remove-image';
          removeBtn.innerHTML = '<i class="fa fa-times"></i>';
          removeBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            imgPreview.remove();
          });
          
          imgPreview.appendChild(removeBtn);
          
          // 插入到添加按钮前
          imagesPreview.insertBefore(imgPreview, addBtn);
        } else {
          alert('最多只能添加9张图片');
        }
      });
    });
    
    // 发布功能
    document.querySelectorAll('.publish-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const activePage = getActivePage();
        const postInput = activePage.querySelector('.post-input');
        const imagesCount = activePage.querySelector('.images-preview').children.length - 1; // 减1是排除添加按钮
        
        if (postInput.value.trim() === '' && imagesCount === 0) {
          alert('请输入内容或添加图片');
          return;
        }
        
        // 显示发布成功弹窗
        document.getElementById('successModal').style.display = 'flex';
      });
    });
    
    // 关闭弹窗
    document.getElementById('modalConfirm').addEventListener('click', function() {
      document.getElementById('successModal').style.display = 'none';
    });
    
    // 取消和返回按钮
    document.querySelectorAll('.back-btn, .cancel-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (confirm('确定要取消发布吗？内容将不会保存')) {
          // 在实际应用中这里会返回上一页
          console.log('取消发布');
        }
      });
    });
    
    // 预览按钮
    document.querySelectorAll('.preview-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        alert('预览功能：在实际应用中这里会显示发布内容的预览效果');
      });
    });
  </script>
</body>
</html>
